// 新增笔记页面
<template>
  <div class="note-edit-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="笔记标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入笔记标题"></el-input>
      </el-form-item>

      <el-form-item label="笔记标签" prop="tags">
        <el-select
          v-model="form.tags"
          multiple
          filterable
          allow-create
          placeholder="请选择或输入标签"
        >
          <el-option
            v-for="tag in allTags"
            :key="tag"
            :label="tag"
            :value="tag"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="笔记内容" prop="Context">
        <el-input
          type="textarea"
          :rows="15"
          v-model="form.Context"
          placeholder="请输入笔记内容（支持Markdown语法）"
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "NoteEdit",
  data() {
    return {
      isEdit: false,
      allTags: ["前端", "后端", "数据库", "Vue", "React", "Node.js"],
      form: {
        id: null,
        title: "",
        tags: [],
        Context: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入笔记标题", trigger: "blur" },
          {
            min: 3,
            max: 50,
            message: "长度在 3 到 50 个字符",
            trigger: "blur",
          },
        ],
        Context: [
          { required: true, message: "请输入笔记内容", trigger: "blur" },
          { min: 10, message: "内容不能少于10个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    if (this.$route.params.id) {
      this.isEdit = true;
      // 这里应该调用API获取笔记详情
      this.form = {
        id: this.$route.params.id,
        title: this.$route.params.title,
        Context: this.$route.params.Context,
        tags: this.$route.params.tags,
      };
    }
  },
  methods: {
    // 提交表单
    submitForm() {
      const title = this.form.title;
      const Context = this.form.Context;
      const tags = this.form.tags;
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            // 编辑笔记
            axios
              .patch(`http://127.0.0.1:3000/api/UpdataNote/${this.form.id}`, {
                title,
                Context,
                tags,
              })
              .then(() => {
                this.$message.success("文章更新成功");
              })
              .catch(() => {
                this.$message.error("文章更新失败：");
              });
          } else {
            // 新建笔记
            axios
              .post("http://127.0.0.1:3000/api/AddNote", {
                title,
                Context,
                tags,
              }) // 传递表单内容
              .then(() => {
                this.$message.success("笔记创建成功");
              })
              .catch(() => {
                this.$message.error("笔记创建失败");
              });
          }
          this.$router.push("/Notes");
        } else {
          return false;
        }
      });
    },
    // 点击取消跳转
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.note-edit-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.el-select {
  width: 100%;
}
</style>
